<template>
    <div class="yt-list-content">
      <div class="list-operation">
        <div id="buEcharts" style="height: 400px;width: 100%;"></div>
        <div class="yt-btn yt-btn-ys" type="primary" @click="exportEchar"style="margin-bottom: 20px">{{$t('button.export')}}</div>
        <div class="yt-btn yt-btn" type="primary" style="margin-bottom: 20px;margin-left: 12px" @click="setUp">{{$t('button.set')}}</div>
        <el-table :data="list" :empty-text="$t('placeholder.emptyText')" class="yt-table" style="width: 100%" v-loading="loading" :element-loading-text="$t('buPieChart.loading')" max-height="600">
          <!--<el-table-column type="index" align="center" :label="$t('buPieChart.monthlyWorks.index')" width="60"/>-->
          <el-table-column align="center" label="Month" prop="monthName" v-if="displayBlockNameStr['monthName']" width="80"/>
          <el-table-column align="center" :label="$t('buPieChart.monthlyWorks.recognizedIncome')" v-if="displayBlockNameStr['recognizedIncome']">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.recognizedIncome}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('buPieChart.monthlyWorks.completedIncome')" v-if="displayBlockNameStr['completedIncome']">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.completedIncome}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('buPieChart.monthlyWorks.completedCost')" v-if="displayBlockNameStr['completedCost']">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.completedCost}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('buPieChart.monthlyWorks.completedGrossProfit')" v-if="displayBlockNameStr['completedGrossProfit']">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.completedGrossProfit}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('buPieChart.monthlyWorks.manageAmortizationCost')" v-if="displayBlockNameStr['manageAmortizationCost']">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.manageAmortizationCost}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('buPieChart.monthlyWorks.grossBusinessProfit')" v-if="displayBlockNameStr['grossBusinessProfit']">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.grossBusinessProfit}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('buPieChart.monthlyWorks.completedManageAmortizationCost')" v-if="displayBlockNameStr['completedManageAmortizationCost']">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.completedManageAmortizationCost}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('buPieChart.monthlyWorks.completedMonthIncome')" v-if="displayBlockNameStr['completedMonthIncome']">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.completedMonthIncome}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('buPieChart.monthlyWorks.completedManageAmortization')" v-if="displayBlockNameStr['completedManageAmortization']">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{scope.row.completedManageAmortization}}</div>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog :title="$t('projectRevenue.dataReport.setVisible')" :visible.sync="TableTitleVisible">
          <yt-table-title :blockNameCode="blockNameCode" :displayBlockNameList ="displayBlockNameList" @cancel="cancel"></yt-table-title>
        </el-dialog>
      </div>
    </div>
</template>

<script>
  import { queryWorkExecuteByMonthly, uploadEchar, exportWorkExecuteByMonthly } from '@/api/pmoReport/buPieChartReport';
  import { queryDisplayBlock } from '@/api/pmoReport/projectRevenue';
  import YtTableTitle from '@/components/yt-table-title/index';
  import echarts from 'echarts'
  export default {
    name: 'monthlyWorks',
    props: {
      // 查询次数
      query: {
        type: Number,
        default: 0
      },
      listQuery: {
        type: Object,
        default: {}
      }
    },
    components: { YtTableTitle },
    watch: {
      query: {
        handler() {
          this.getData()
        }
      }
    },
    data() {
      return {
        list: [],
        chart: null,
        loading: false,
        TableTitleVisible: false,
        blockNameCode: 'monthlyWorks',
        displayBlockNameList: [],
        displayBlockNameStr: {}
      };
    },
    mounted() {
      this.chart = echarts.init(document.getElementById('buEcharts'))
      this.getData()
      this.getColumn();
    },
    methods: {
      cancel(val) {
        if (val) {
          this.getColumn();
        }
        this.TableTitleVisible = false
      },
      // 获取初始的栏位
      getColumn() {
        const data = {
          tableName: this.blockNameCode,
          userId: this.$store.getters.info.id
        }
        this.getMixinColumn(data)
      },
      getMixinColumn(data) {
        this.displayBlockNameStr = {}
        queryDisplayBlock(data).then(res => {
          if (res.status === 200) {
            this.displayBlockNameList = res.data
            for (const i in this.displayBlockNameList) {
              this.displayBlockNameStr[this.displayBlockNameList[i]] = true
            }
          }
        })
      },
      // 获取弹框的栏位
      setUp() {
        // 设置
        this.TableTitleVisible = true
      },
      exportEchar() {
        const base64Data = this.chart.getDataURL()
        // 生成图片
        uploadEchar({ base64Data }).then(res => {
          if (res.status === 200) {
            // 导出excel表格
            const imgPath = res.data

            const a = document.createElement('a');
            const href = exportWorkExecuteByMonthly(this.list, this.$store.getters.info.id, imgPath);
            a.download = Date.now();
            a.href = href;
            a.click();
          }
        })
      },
      getData() {
        this.loading = true
        if (this.chart) {
          this.chart.showLoading({
            text: this.$t('businessObjectives.loading'),
            color: '#409EFF',
            textColor: '#000',
            maskColor: 'rgba(255, 255, 255, 0.8)' // 背景色
          });
        }
        const obj = {}
        queryWorkExecuteByMonthly(this.listQuery).then(res => {
          if (res.data && res.data !== 'null' && res.data.length > 0) {
            this.list = res.data
            this.list.forEach(row => {
              Object.keys(row).forEach(key => {
                if (!obj.hasOwnProperty(key)) {
                  obj[key] = []
                }
                obj[key].push(row[key])
              })
            })
            this.initChart(obj)
          }
          if (this.chart) {
            this.chart.hideLoading();
          }
          this.loading = false
        })
      },
      initChart(obj) {
        this.chart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          legend: {// 图例组件
            // x: 'center',
            // y: 'top',
            right: '1%',
            show: true,
            textStyle: {// 图例的公用文本样式。
              fontSize: 14,
              color: '#606266'
            },
            itemGap: 20, // 图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
            // 图例的数据数组。
            data: [
              this.$t('buPieChart.monthlyWorks.completedMonthIncome'), // 当月完工收入
              this.$t('buPieChart.monthlyWorks.completedManageAmortization'), // '当月完工+营销成本'
              this.$t('buPieChart.monthlyWorks.recognizedIncome'), // '合约收入(本年度)'
              this.$t('buPieChart.monthlyWorks.completedIncome'), // '完工收入(本年度)'
              this.$t('buPieChart.monthlyWorks.completedManageAmortizationCost'), //  '完工成本（本年度）+营销成本'
              this.$t('buPieChart.monthlyWorks.grossBusinessProfit') // '营业毛利(本年度)'
            ]
          },
          grid: {// 直角坐标系内绘图网格
            bottom: '12%', // grid 组件离容器下侧的距离。
            left: '1%',
            right: '1%',
            containLabel: true// grid 区域是否包含坐标轴的刻度标签。
          },
          xAxis: [
            {
              type: 'category',
              data: obj.monthName,
              axisPointer: {
                type: 'shadow'
              },
              axisTick: {
                show: true,
                interval: 0
              },
              axisLabel: {
                fontSize: 14,
                color: '#333'
              }
            }],
          yAxis: [
            {
              type: 'value',
              show: true,
              splitNumber: 10, // 坐标轴的分割段数
              axisLabel: {
                fontSize: 14,
                color: '#333'
              },
              splitLine: {
                show: false// 是否显示分隔线。
              }
            },
            {
              type: 'value',
              show: true,
              splitNumber: 10, // 坐标轴的分割段数
              axisLabel: {
                fontSize: 14,
                color: '#333'
              },
              splitLine: {
                show: false// 是否显示分隔线。
              }
            }
          ],
          series: [
            {
              name: this.$t('buPieChart.monthlyWorks.completedMonthIncome'),
              type: 'bar',
              yAxisIndex: 1,
              data: obj.completedMonthIncome,
              // barWidth: '50%',//柱图间距
              barWidth: 30, // 柱图宽度
              itemStyle: {
                normal: {
                  color: ['#00b0f0']
                }
              }
            },
            {
              name: this.$t('buPieChart.monthlyWorks.completedManageAmortization'),
              type: 'bar',
              yAxisIndex: 1,
              data: obj.completedManageAmortization,
              // barWidth: '50%',
              barWidth: 30, // 柱图宽度
              itemStyle: {
                normal: {
                  color: ['#c00000']
                }
              }
            },
            {
              name: this.$t('buPieChart.monthlyWorks.recognizedIncome'),
              type: 'line',
              yAxisIndex: 0,
              data: obj.recognizedIncome,
              symbolSize: 10,
              itemStyle: {
                normal: {
                  color: ['#4572a7']
                }
              }
            },
            {
              name: this.$t('buPieChart.monthlyWorks.completedIncome'),
              type: 'line',
              yAxisIndex: 0, // 这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
              data: obj.completedIncome,
              symbolSize: 10,
              itemStyle: {
                normal: {
                  color: ['#00b0f0']
                }
              }
            },
            {
              name: this.$t('buPieChart.monthlyWorks.completedManageAmortizationCost'),
              type: 'line',
              yAxisIndex: 0,
              data: obj.completedManageAmortizationCost,
              symbolSize: 10,
              itemStyle: {
                normal: {
                  color: ['#ff0000']
                }
              }
            },
            {
              name: this.$t('buPieChart.monthlyWorks.grossBusinessProfit'),
              type: 'line',
              yAxisIndex: 0,
              data: obj.grossBusinessProfit,
              symbolSize: 10,
              itemStyle: {
                normal: {
                  color: ['#7030a0']
                }
              }
            }
          ]
        })
      }
    }
  };
</script>
<style scoped>
</style>
